<template>
    <!-- 7.场馆下药品耗材弹窗（若点击左侧栏药品耗材医疗点列表也会弹出此窗口） -->
    <div class="drug_list_dialog">
        <el-dialog v-model="isShowDrug" title="药品耗材信息" width="50%" :close-on-click-modal="false" :destroy-on-close="true"
            @close="handleClose">
            <el-form :inline="true">
                <el-form-item label="医疗点">
                    <el-input v-model="medicalName" placeholder="请输入医疗点" @input="handleMedicalPointInput"></el-input>
                </el-form-item>
                <el-form-item label="药品">
                    <el-input v-model="drugName" placeholder="请输入药品名称" @input="handleDrugInput"></el-input>
                </el-form-item>
            </el-form>
            <el-radio-group v-model="radioType">
                <el-radio :label="1" border>药品</el-radio>
                <el-radio :label="2" border>耗材</el-radio>
            </el-radio-group>
            <el-table :data="radioType == 1 ? grugDataCopy : consumDataCopy" style="width: 100%" height="500"
                :key="radioType">
                <el-table-column prop="dacName" label="药品名称" />
                <el-table-column prop="remainder" label="剩余量" />
                <el-table-column prop="total" label="总数" />
                <el-table-column prop="percentage" label="百分比" />
                <el-table-column prop="mpName" label="医疗点" />
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
// 这里可以导入其他文件(比如: 组件、工具js、第三方插件js、json文件、图片文件...)
// 例如: import <组件名称> from '<组件路径>';
import { ref, reactive, toRefs, watch, computed } from 'vue'
export default {
    // import 引入的组件需要注入到对象中才能使用
    components: {},
    props: ['showDrugFlag', 'DACTableData'],
    setup(props) {
        /**
         * 状态
         */
        const compState = reactive({
            isShowDrug: false,
            DACTableData: [],
            DACTableDataCopy: [],
            grugData: [],
            grugDataCopy: [],
            consumData: [],
            consumDataCopy: [],
            medicalName: "",
            drugName: "",
            radioType: 1
        })
        watch([() => props.showDrugFlag], ([newV]) => {
            // console.log('props.showDrugFlag', newV)
            // console.log('props.DACTableData', props.DACTableData)

            compState.DACTableData = props.DACTableData
            compState.DACTableDataCopy = [...compState.DACTableData]

            if (props.DACTableData.length == 1) {
                if (props.DACTableData[0].drug) {
                    compState.grugData = props.DACTableData[0].drug
                    compState.grugDataCopy = [...compState.grugData]
                } else {
                    compState.consumData = props.DACTableData[0].consum
                    compState.consumDataCopy = [...compState.consumData]
                }
            }
            if (props.DACTableData.length == 2) {
                compState.grugData = props.DACTableData[0].drug
                compState.grugDataCopy = [...compState.grugData]
                compState.consumData = props.DACTableData[1].consum
                compState.consumDataCopy = [...compState.consumData]
            }
            compState.isShowDrug = true
        })
        /**
         * 事件
         */
        const handleClose = () => {
            compState.isShowMedicalGroup = false
            compState.activeTypeNameAmbu = 'ambufirst'
            compState.radioType = 1
        }
        // 根据医疗点筛选
        const handleMedicalPointInput = (val) => {
            // console.log(val)
            if (compState.radioType == 1) {
                compState.grugDataCopy = compState.grugData.filter(item => {
                    return item.mpName.includes(val)
                })
            } else {
                compState.consumDataCopy = compState.consumData.filter(item => {
                    return item.mpName.includes(val)
                })
            }
            // compState.DACTableDataCopy = compState.DACTableData.filter(item => {
            //     return item?grug.mpName.includes(val)
            // })
        }
        // 根据药品筛选
        const handleDrugInput = (val) => {
            // console.log(val)
            if (compState.radioType == 1) {
                compState.grugDataCopy = compState.grugData.filter(item => {
                    return item.dacName.includes(val)
                })
            } else {
                compState.consumDataCopy = compState.consumData.filter(item => {
                    return item.dacName.includes(val)
                })
            }
            // compState.DACTableDataCopy = compState.DACTableData.filter(item => item.dacName.includes(val))
        }
        const refState = toRefs(compState);
        return {
            // return 结构后的状态
            ...refState,
            // return 事件
            handleClose,
            handleMedicalPointInput,
            handleDrugInput
        }
    }
}
</script>
<style scoped></style>